<template>
  <div>
      <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
           
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
          <!-- 警告提示 -->
            <el-alert
            title="注意：只允许为第三级分类设置相关参数!"
            type="warning"
            show-icon>
          </el-alert>
          <!-- 选择商品分类 -->
          <el-row class="goodRow">
            <el-col>
              <span>选择商品分类：</span>
              <el-cascader
                v-model="selectedKeys"
                :options="paramsOptionsList"
                :props="paramsProps"
                @change="paramsChange"
                clearable>
              </el-cascader>
            </el-col>
          </el-row>
            
          <!-- tab菜单栏 -->
          <el-tabs type="border-card" v-model="activeName" @tab-click="clickPane">
            <!-- 动态参数 -->
            <el-tab-pane label="动态参数" name="many">
              
              <!-- 按钮 -->
              <el-button type="primary" :disabled="showButton" @click="addParams">添加参数</el-button>
          
              <!-- 动态参数表格 -->
              <el-table
                :data="manyParamsList"
                border
                stripe
                style="width: 100%">
               
                  <!-- 展开列 -->
                  <el-table-column type="expand">
                    <template slot-scope="scope">
                      <el-tag @close="handleClose(index,scope.row)" v-for="(item,index) in scope.row.attr_vals" :key="index" closable>{{item}}</el-tag>
                      <!-- 添加标签组件 -->
                      <el-input
                        class="input-new-tag"
                        v-if="scope.row.inputVisible"
                        v-model="scope.row.inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm(scope.row)"
                        @blur="handleInputConfirm(scope.row)"
                      >
                      </el-input>
                      <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                    </template>
                  </el-table-column>
                  
                  <!-- 索引列 -->
                  <el-table-column type="index" label="#"></el-table-column>
                  <el-table-column prop="attr_name" label="参数名称" ></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" icon="el-icon-edit" size="mini" @click="editParams(scope.row.attr_id)">编辑</el-button>
                      <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteEditParams(scope.row.attr_id)">删除</el-button>
                    </template>
                    
                  </el-table-column>
               
                
              </el-table>
            
            </el-tab-pane>
            <el-tab-pane label="静态属性" name="only">
              <el-button type="primary" :disabled="showButton" @click="addParams">添加属性</el-button>
              <!-- 动态参数表格 -->
              <el-table
                :data="onlyParamsList"
                border
                stripe
                style="width: 100%">
               
                  <!-- 展开列 -->
                  <el-table-column type="expand">
                     <template slot-scope="scope">
                       <el-tag v-for="(item,index) in scope.row.attr_vals" :key="index" closable>{{item}}</el-tag>
                         <el-input
                        class="input-new-tag"
                        v-if="scope.row.inputVisible"
                        v-model="scope.row.inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm(scope.row)"
                        @blur="handleInputConfirm(scope.row)"
                      >
                      </el-input>
                      <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                     </template>
                  </el-table-column>
                  
                  <!-- 索引列 -->
                  <el-table-column type="index" label="#"></el-table-column>
                  <el-table-column prop="attr_name" label="参数名称" ></el-table-column>
                  <el-table-column label="操作">
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                  </el-table-column>
               
                
              </el-table>
            </el-tab-pane>

          </el-tabs>
        </el-card>
        <!-- 当点击添加按钮时 显示对话框-->
        <el-dialog
        :title="'添加'+selectedPane"
        :visible.sync="addParamsVisible"
        width="50%"
        @close="addParamsFormClosed"
        >
          <!-- 表单区域 -->
          <el-form :model="addParamsForm" :rules="addParamsFormRules" ref="addParamsFormRef" label-width="100px" >
            <el-form-item :label="selectedPane" prop="attr_name">
              <el-input v-model="addParamsForm.attr_name"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addParamsVisible = false">取 消</el-button>
            <el-button type="primary" @click="addParamsSubmit">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 当点击编辑按钮时，显示对话框 -->
        <el-dialog
        :title="'编辑'+selectedPane"
        :visible.sync="editParamsVisible"
        width="50%"
        @close="editParamsFormClosed"
        >
          <!-- 表单区域 -->
          <el-form :model="editParamsForm" :rules="addParamsFormRules" ref="editParamsFormRef" label-width="100px" >
            <el-form-item :label="selectedPane" prop="attr_name">
              <el-input v-model="editParamsForm.attr_name"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editParamsVisible = false">取 消</el-button>
            <el-button type="primary" @click="editParamsSubmit">确 定</el-button>
          </span>
        </el-dialog>
 
  </div>
</template> 
<script>
export default {
  data(){
    return{
      // 设置级联属性
      paramsProps:{
        expandTrigger: 'hover',//展开方式 -- 触发
        value:"cat_id",
        label:"cat_name",
        children:"children"

      },
      // 级联选择器参数列表
      paramsOptionsList:[],
      // 被选择的选项数组
      selectedKeys:[],
      
      // 动态参数列表
      manyParamsList:[],
      // 静态数据列表
      onlyParamsList:[],
      // 当前激活的菜单栏
      activeName: 'many',
      // 点击添加按钮时，显示对话框
      addParamsVisible:false,
      // 添加表单存储数据表单
      addParamsForm:{
      
      },
      // 验证规则
      addParamsFormRules:{
        attr_name:[
           { required: true, message: '请输入分类', trigger: 'blur' }
        ]
      },
      // 编辑表单时，显示对话框
      editParamsVisible:false,
      // 编辑表单存储数据表单
      editParamsForm:{

      },
      // 要编辑的id
      editId:"",
   
      // 标签数列
      paramsTags:[]
   

    }
  },
  created(){
    // 向服务器发起请求获取商品分类数据
    this.getParamsList()
  },
  computed:{
      // 是否显示添加按钮 true禁用 false可用
      showButton(){
        if(this.selectedKeys.length !== 3){
          // 当前被选中的级联列表不是三级
          // 将添加按钮禁用、同时将动态参数和静态属性设置为空
          this.manyParamsList = []
          this.onlyParamsList = []
          return true
        }
        return false
      },
      // 当前选择的三级分类id
      selectedId(){
        if (this.selectedKeys.length === 3) {
          return this.selectedKeys[2]
        }
        return null
      },
      // 动态计算标题的文本
      selectedPane(){
        if(this.activeName === "many"){
          return "动态参数"
        }
        return "静态参数"
      }

  },
  methods:{
    
    // 获取级联选择器参数-商品分类数据
    async getParamsList(){
      // 向服务器发起请求获取商品分类数据
      const { data:res } = await this.$http.get("categories");
      // 先对服务器返回的状态码进行判断
      if(res.meta.status !== 200){
        return this.$message.error("获取参数失败")
      }
      // 将获取的列表数据进行保存
      this.paramsOptionsList = res.data
      console.log(res.data);
      
    },
    // 选择级联选择器选项
    paramsChange(){
    
      this.getGoodsParamsList()
      console.log(this.manyParamsList);
      
      // console.log(this.selectedKeys);
      
    },
    // tab页签点击事件的处理函数
    clickPane(){
      console.log(this.cativeName);
      this.getGoodsParamsList()
    },
    // 根据级联选择器商品分类id和菜单栏进行数据获取
    async getGoodsParamsList(){
           
      // 级联选择器必须选择三级才可使用
      if(this.selectedKeys.length !== 3){
        // 未选择三级分类 设置已选择分类列表为空
        this.selectedKeys = []
        return
      }
      // 级联选择器选择了三级分类
      // 设置按钮解除禁用
      
      // 向服务器请求参数
      const {data:res} = await this.$http.get(`categories/${this.selectedId}/attributes`,{params:{
        sel:this.activeName
      }})
      
      if(res.meta.status !== 200){
        return this.$message.error("获取数据失败")
      }

      // 从请求参数中对属性值进行空格分隔
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        // 控制文本框的显示与隐藏
        item.inputVisible = false
        // 文本框中输入的值
        item.inputValue = ''
      })

      // 将请求回来的数据保存在列表中
      if(this.activeName === "many"){
        this.manyParamsList = res.data
      }else{
        this.onlyParamsList = res.data
      }
      
    },
  
    // 当点击添加按钮时
    addParams(){
      this.addParamsVisible = true
    },
    // 当点击确定按钮时
    addParamsSubmit(){
      // 先对表单数据进行预验证
      this.$refs.addParamsFormRef.validate(async valid=>{
        if(!valid){
          return
        }
        console.log(this.selectedId);
        console.log(this.activeName);
        console.log(this.addParamsForm);
        
        
        
        // 通过验证
        // 将数据进行提交 categories/:id/attributes
        const {data:res} = await  this.$http.post(`categories/${this.selectedId}/attributes`,{
          
            attr_name:this.addParamsForm.attr_name,
            attr_sel:this.activeName
          }
        )
        console.log(res);
        
        if(res.meta.status !==201){
          return this.$message.error("提交数据失败")
        }

        this.$message.success("数据提交成功")

        
        console.log(res.data);
        this.addParamsVisible = false
        this.getGoodsParamsList()
        
      })
      
      
    },
    // 当点击关闭按钮时，进行清空表单内容
    addParamsFormClosed(){
      this.$refs.addParamsFormRef.resetFields()
    },
    // 当点击编辑按钮时，先从服务器中加载数据
    async getEditParams(){   
      // 向服务器中发起请求
      const {data:res} =  await this.$http.get(`categories/${this.selectedId}/attributes/${this.editId}`)
      if(res.meta.status !==200){
        return this.$message.error("加载数据失败")
      }
      this.editParamsForm = res.data
      console.log(res);
      
    },
    // 当点击编辑按钮时
    editParams(id){
      this.editId = id
      // 向服务器发起请求
      this.getEditParams()

      // 显示对话框
      this.editParamsVisible =true
    },
    // 当关闭对话窗时触发事件
    editParamsFormClosed(){
      this.$refs.editParamsFormRef.resetFields()
      this.editParamsVisible = false
    },
    // 当点击提交按钮
    editParamsSubmit(){
      // 先进行表单验证
      this.$refs.editParamsFormRef.validate(async valid=>{
        // 验证未通过
        if(!valid){
          return
        }
        // 向服务器发起请求
        const {data:res} = await this.$http.put(`categories/${this.selectedId}/attributes/${this.editId}`,{
          attr_name:this.editParamsForm.attr_name,
          attr_sel:this.activeName
        })
        // 
        if(res.meta.status !== 200){
          return this.$message.error("数据提交失败")
        }
        this.$message.success("数据提交成功")
        // 先关闭对话框
        this.editParamsVisible = false
        // 重新加载数据
        this.getGoodsParamsList()
      })
      
    },
    // 当点击删除按钮时
    async deleteEditParams(id){
      // 接收用户的选择
      const confirmResult = await this.$confirm('是否要删除此数据', '删除数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(
        err=>err
      );
      // 如果用户选择了确定按钮，进行删除
      if(confirmResult === "confirm"){
        // 向服务器发起请求
        const {data:res} = await this.$http.delete(`categories/${this.selectedId}/attributes/${id}`)
        // 判断服务器返回的数据
        if(res.meta.status !== 200){
          return this.$message.error("获取数据失败")
        }
        
        this.$message.success("删除数据成功")
        // 刷新数据
        this.getGoodsParamsList()
        
      }
    },
    // 当点击添加标签组件，回车或者失去焦点时触发事件
    handleInputConfirm(row) {
      if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        row.inputVisible = false
        return
      }
      // 如果没有return，则证明输入的内容，需要做后续处理
      row.attr_vals.push(row.inputValue.trim())
      row.inputValue = ''
      row.inputVisible = false
      // 需要发起请求，保存这次操作
      this.saveAttrVals(row)
    },
    // 当点击添加标签进行输入切换时触发
    showInput(row){
      //点击添加按钮时，显示输入框
      row.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 将对 attr_vals 的操作，保存到数据库
    async saveAttrVals(row) {
      // 需要发起请求，保存这次操作
      const { data: res } = await this.$http.put(
        `categories/${this.selectedId}/attributes/${row.attr_id}`,
        {
          attr_name: row.attr_name,
          attr_sel: row.attr_sel,
          attr_vals: row.attr_vals.join(' ')
        }
      )

      if (res.meta.status !== 200) {
        return this.$message.error('修改参数项失败！')
      }

      this.$message.success('修改参数项成功！')
    },
    //当点击关闭标签按钮时
    handleClose(i,row) {
        // 根据索引删除参数
        row.attr_vals.splice(i,1)
        this.saveAttrVals(row)
    },
  }
}
</script>

<style lang="less" scoped>
  .goodRow{
    margin: 10px 0 ;
  }

  .el-tag{
    margin: 5px;
  }
  // 设置标签输入框的宽度
  .input-new-tag{
    width: 100px;
  }
 
</style>